import React from 'react';
import { useRef, useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom'
import style from './Coupons.module.css'
import { Input, Form, Button, DatePicker, ConfigProvider, Radio, InputNumber, message } from 'antd'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
import 'antd/dist/reset.css';
import { useNavigate } from 'react-router-dom';
import Store from "./../../store/index"
import * as actions from "./../../store/actions/marketing/index"

dayjs.locale('zh-cn');
const { RangePicker } = DatePicker;

const CouponsCV = () => {
    const [messageApi, contextHolder] = message.useMessage();
    const [info, setInfo] = useState(true);
    const [bol, setBol] = useState(true)
    const [dyc, setDyc] = useState(true)
    const location = useLocation()
    const [value, setValue] = useState(1);
    const [value1, setValue1] = useState(1);
    const domRef = useRef()
    const domRef1 = useRef()
    const [size, setSize] = useState('large');
    const nameRef = useRef()
    const totalRef = useRef()
    const rmbRef = useRef()
    const rmbRef1 = useRef()
    // const rmbRef2 = useRef()
    const [rebate, setRebate] = useState(null)
    // console.log(location)
    const name = location.state.name
    useEffect(() => {
        if (location.state.type === '满减券') {
            setInfo(true)
        } else if (location.state.type === '折扣券') {
            setInfo(false)
        }
    }, [])
    const a = location.state.txFb
    // 时间
    const [arr, setArr] = useState(a ? [] : location.state.item)
    const hour = (value, dateString) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        setArr(dateString)
    };
    const onOk = (value) => {
        console.log('onOk: ', value);
    };

    const [num, setNum] = useState(location.state.content)
    let [content, setContent] = useState(a ? [] : num.match(/\d+(\.\d+)?/g))

    const remainder = location.state.remainder
    const domXouGai = () => {
        setInfo(true)
    }
    const domXouGai1 = () => {
        setInfo(false)
        setValue(1)
        setBol(true)
    }
    useEffect(() => {
        const dom = domRef.current
        const dom1 = domRef1.current
        if (info) {
            dom.classList.add(style.youZheD)
            dom1.classList.remove(style.youZheD)
        } else {
            dom1.classList.add(style.youZheD)
            dom.classList.remove(style.youZheD)
        }
    }, [info])
    const onChange = (e) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
        let num = e.target.value
        if (num === 1) {
            setBol(true)
        } else {
            setBol(false)
        }
    };
    const onChange1 = (e) => {
        console.log('radio checked', e.target.value);
        setValue1(e.target.value);
        if (e.target.value) {
            setDyc(!dyc)
        }
    }
    const navigate = useNavigate()
    const Cancel = () => {
        navigate(-1)
    }
    const fold = (value) => {
        // console.log(value)
        setRebate(value)
    }
    const determine = () => {
        const a = nameRef.current.input.value
        let b = ''
        if (info && bol) {
            b = '满' + rmbRef.current.input.value + '减' + rmbRef1.current.input.value
        } else if (info && !bol) {
            b = '每满' + rmbRef.current.input.value + '减' + rmbRef1.current.input.value
        } else if (!info) {
            b = '满' + rmbRef.current.input.value + '打' + rebate + '折'
        }
        let c = ''
        if (info) {
            c = '减满券'
        } else {
            c = '折扣券'
        }
        const d = 0;
        const e = totalRef.current.value
        const f = '未开始'
        const addObj = { name: a, content: b, type: c, Claimed: d, remainder: e, state: f, item: arr }
        const editObj = { key: location.state.key, id: location.state.id, name: a, content: b, type: c, Claimed: location.state.Claimed, remainder: e, state: location.state.state, item: arr }
        const txFb = location.state.txFb
        const abc = (a !== '') && (b !== '') && (e !== '') && (arr.length !== 0)
        if (txFb && abc) {
            Store.dispatch(actions.addUser(addObj))
            navigate(-1)
        } else {
            messageApi.open({
                type: 'error',
                content: '数据不完整',
            });
            return
        }
        if (!txFb && abc) {
            navigate(-1)
            Store.dispatch(actions.editUser(editObj))
        } else {
            messageApi.open({
                type: 'error',
                content: '数据不完整',
            });
            return
        }
    }
    return (
        <ConfigProvider locale={zhCN}>
            <div className={style.tjBj}>
                <div>
                    <h1 className={style.title}>{location.state.title}</h1>
                </div>
                <div className={style.son}>
                    <div className={style.youZhe} onClick={domXouGai} ref={domRef}>
                        <h1>减满券</h1>
                        <p className={style.youZheP}>例如：满100减20</p>
                    </div>
                    <div className={style.youZhe} onClick={domXouGai1} ref={domRef1}>
                        <h1>折扣券</h1>
                        <p className={style.youZheP}>例如：满100打8折</p>
                    </div>
                </div>
                <div className={style.son1}>
                    <h4>基本信息</h4>
                    <div>
                        <Form
                            labelCol={{
                                span: 3,
                            }}
                            wrapperCol={{
                                span: 14,
                            }}
                            layout="horizontal"
                        >
                            <Form.Item colon={false} label='优惠劵名称 ' name='优惠劵名称' rules={[
                                { required: true, }
                            ]} initialValue={name}>
                                <Input style={{ width: 348 }} placeholder="请输入名称" allowClear ref={nameRef} />
                            </Form.Item>
                            <Form.Item colon={false} label='用券时间' name='用券时间' rules={[{ required: true }]}>
                                <div>
                                    <RangePicker
                                        showTime={{
                                            format: 'HH:mm',
                                        }}
                                        format="YYYY-MM-DD HH:mm"
                                        defaultValue={location.state.txFb ? null : [dayjs(arr[0]), dayjs(arr[1])]}
                                        onChange={hour}
                                        onOk={onOk}
                                    />
                                </div>
                            </Form.Item>
                            <Form.Item colon={false} label='优惠内容' name='优惠内容' rules={[{ required: true }]}>
                                <div>
                                    <div>
                                        <Radio.Group onChange={onChange} value={value}>
                                            <Radio value={1} style={{ marginRight: '50px' }}>阶梯优惠</Radio>
                                            {
                                                info ? <Radio value={2}>循环优惠</Radio> : null
                                            }
                                        </Radio.Group>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span style={{ marginRight: '10px' }}>{bol ? '满' : '每满'}</span>
                                        <Input style={{ width: 110 }} prefix="￥" suffix="RMB" defaultValue={content[0]} ref={rmbRef} />，
                                        {
                                            info ? <span>
                                                <span style={{ marginRight: '10px' }}>减</span>
                                                <Input style={{ width: 110 }} prefix="￥" suffix="RMB" defaultValue={content[1]} ref={rmbRef1} />
                                            </span>
                                                : <span>
                                                    <span style={{ marginRight: '10px' }}>打</span>
                                                    <InputNumber style={{ width: 60 }} step="0.001" min={0} max={10} defaultValue={content[1]} onChange={fold} />
                                                    <span style={{ marginLeft: '10px' }}>折</span>
                                                </span>
                                        }
                                    </div>
                                </div>
                            </Form.Item>
                            <Form.Item colon={false} label='总发放量' name='总发放量' rules={[{ required: true }]}>
                                <div>
                                    <InputNumber min={0} max={100000} defaultValue={remainder} ref={totalRef} />
                                    <span style={{ marginLeft: '10px' }}>张</span>
                                </div>
                            </Form.Item>
                            <Form.Item colon={false} label='领取限制 ' name='领取限制 ' rules={[{ required: true }]}>
                                <div>
                                    <Radio.Group onChange={onChange1} value={value1}>
                                        <Radio value={1}>次数不限</Radio>
                                        <Radio value={2}>每人最多可领</Radio>
                                    </Radio.Group>
                                    <div style={{ marginTop: '10px' }}>
                                        <InputNumber min={1} max={10} disabled={dyc} defaultValue={1} />
                                        <span style={{ marginLeft: '10px' }}>张</span>
                                    </div>
                                </div>
                            </Form.Item>
                            <Form.Item>
                                <div className={style.an}>
                                    {contextHolder}
                                    <Button style={{ width: 89 }} type="primary" size={size} onClick={determine} >确定</Button>
                                    <Button style={{ width: 89 }} size={size} onClick={Cancel}>取消</Button>
                                </div>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </ConfigProvider>
    );
}

export default CouponsCV;
